<template>
  <openlayer-base-map ref="refOpenlayerBaseMap" :currentPageType="'complain'" :isShowLend="false"
    @getOlMapInstance="getOlMapInstance" @getCurrentViewData="getCurrentViewData" @getCircleData="getComplainData"
    @setCircleDialogData="setCircleDialogData" @addArrowLine="addArrowLine" @reflashMap="reflashMap">

    <el-button type="primary" @click="reflashMap" class="reflash_map">刷新地图</el-button>

    <!-- 右侧信息 - 投诉信息 -->
    <complain-common />

    <complain-detail-dialog ref="refCircleDetailDialog" />
  </openlayer-base-map>
</template>

<script setup>
// vue - core
import { ref, onUnmounted } from "vue";
// 组件
import OpenlayerBaseMap from "@/components/OpenlayerBaseMap/index.vue";
import ComplainDetailDialog from "./components/ComplainDetailDialog.vue"; // 点击圆信息
import ComplainCommon from "./components/ComplainCommon.vue"; // 投诉信息
import { getPopupInnerDom, getFeaturesPopupInnerDom } from "./components/popup/complainPopup"; // 气泡窗dom
// api相关 - 工具
import { apiCommon, getNow, getFormulateDate } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";
// 工具
import mittBus from "@/utils/mittBus"; // mitt - 组件传参工具
import complainMarker from "./icon/complain_marker.svg";
import arrow from "./icon/arrow.svg";

const refOpenlayerBaseMap = ref(null); // 地图核心元素

const refCircleDetailDialog = ref(null);

let timmer = null

let myOlMap = null;
let myMapCommonData = null;

/**
 * 接收其他组件派发的方法
 */
/**
 * 气泡窗
 */
// 设置通用气泡窗html
mittBus.on("setCommonPopupInner", ({ popupObj, callback }) => {
  // console.log("设置通用气泡窗html", popupObj);

  callback(getPopupInnerDom(popupObj));
});
// 设置重叠要素气泡窗html
mittBus.on('setFeaturesPopupInner', ({ popupObj, callback, next }) => {
  // console.log(popupObj, callback)

  callback(getFeaturesPopupInnerDom(popupObj, currentDataList => {
    next(currentDataList)
  }));
})
//  气泡窗点击更多 - 子组件使用
mittBus.on("popupDataGetMore", async ({ currentPopupObj, callback }) => {
  // console.log("气泡窗点击更多", currentPopupObj);

  // 或者走接口,根据cgi获取详情
  const currentPopupAsyncObj = await apiCommon(complainApi.queryComplaintInfo, {
    complaintId: currentPopupObj.popupData.complaintId,
  });
  currentPopupObj = currentPopupAsyncObj.data;

  // 获取完数据后进行弹窗
  callback(currentPopupObj);
});

/**
 * 工具方法
 */
// 刷新地图
const reflashMap = () => {
  refOpenlayerBaseMap.value.removeAllLayer(myOlMap)

  getComplainData(myOlMap)
  getCurrentViewData(myOlMap)
}
// 获取可视区域坐标参数
const getCurrentPositionParams = (olMap) => {
  let viewPosition = refOpenlayerBaseMap.value.getCurrentViewPosition(olMap);
  // console.log("获取可视区域的左上角和右下角坐标", viewPosition)

  return {
    minLatitude: viewPosition.bottomRight[1],
    maxLatitude: viewPosition.topLeft[1],
    minLongitude: viewPosition.topLeft[0],
    maxLongitude: viewPosition.bottomRight[0],
  };
};

/**
 * 业务方法
 */
// 获取地图实例 - 地图加载完初始化做的一些操作[业务相关]
const getOlMapInstance = (olMap, mapCommonData) => {
  // console.log("获取地图实例 - 地图加载完初始化做的一些操作[业务相关]", olMap);

  myOlMap = olMap; // 赋值全局变量,为后续业务操作做准备

  myMapCommonData = mapCommonData;
};
// 获取可视区域数据 (主入口)
const getCurrentViewData = async (olMap) => {
  let params = {
    ...getCurrentPositionParams(olMap),
    // dateString: '2024-05-23'
    dateString: getNow()
  };

  let complainData = await apiCommon(complainApi.queryComplaintList, params);
  complainData = complainData.data;
  // console.log(complainData);

  renderFeatureByData(olMap, complainData);
};

// 根据数据渲染Feature
const renderFeatureByData = (olMap, dataList) => {
  refOpenlayerBaseMap.value.renderFeatureByData(
    olMap,
    dataList,
    (olMap, item) => {
      // console.log(olMap, item);

      item.dispatchTime = getFormulateDate(item.dispatchTime)

      let complainPoint = [];
      complainPoint.push({
        lonlat: [item.longitude, item.latitude],
        pointData: item,
      });

      // 批量添加点
      refOpenlayerBaseMap.value.addPoint(
        olMap,
        complainPoint,
        true,
        complainMarker
      );
    }
  );
};

// 设置圆数据(投诉)
const getComplainData = async (olMap) => {
  // console.log(olMap);
  let params = {
    // date: '2024-05-23'
    date: getNow()
  }

  let circleList = await apiCommon(complainApi.queryComplaintCluster, params);
  circleList = circleList.data
  // console.log(circleList)

  refOpenlayerBaseMap.value.renderFeatureByData(
    olMap,
    circleList,
    (olMap, item) => {
      // 添加圆
      refOpenlayerBaseMap.value.addCircle(olMap, item, true);
    }
  );
};

// 点击圆形区域获取数据
const setCircleDialogData = (feature) => {
  // console.log("点击圆形区域获取数据", feature);
  refCircleDetailDialog.value.show(feature);
};

// 添加带箭头的线
const addArrowLine = (olMap, src) => {
  // console.log('添加带箭头的线', olMap, src)

  let position = [[13538079.386677982, 3488521.2319548605], [13540229.178098504, 3488093.6623278903]]
  refOpenlayerBaseMap.value.addArrowLine(olMap, position, arrow)

  // [121.61741884715853,29.882815758963304]
  // [121.63053225085137,29.88277091849403]

}

/**
 * 生命周期
 */
onUnmounted(() => {
  clearInterval(timmer)
})
</script>

<style lang="scss" scoped>
.reflash_map {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
</style>
